@import 'fonts';
@import 'mixins';

#editorbox {
	border-radius: $module_radius;
	box-shadow: 0px 3px 16px black;
	overflow: hidden;
	margin: {
		top: 50px;
		left: 100px;
		right:100px;
	}

	#toolbar, #statusbar {
		padding:  {
			top: 4px;
			bottom: 4px;
			left: 10px;
			right: 10px;
		}


		background: $toolbar_bg;
		color: $toolbar_text;
		font: {
			family: $font_toolbar;
			size: 12px;
		}

		a {
			color: #DCCC22;
			&:hover {
				color: #FDDD33;
			}
			&:active {
				color: #FDDD33;
			}
		}
	}
	#toolbar {
		border-top-left-radius: $module_radius;
		border-top-right-radius: $module_radius;

		h1 {
			color: #FFF;
			width: 100%;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			border-bottom: 1px solid white;
			margin: {
				top: 2px;
				left: 0px;
				right: 0px;
				bottom: 0px;
			}
			padding: {
				left: 30px;
				right: 0px;
			}
			font: {
				family: $font_title;
				size : 32px;
			}
		}

		.items {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			width: 100%;
			margin: {
				top: 2px;
			}
		}
		.item {
			@include unselectable();
			margin: 0px;
			padding: 0px;
			display: inline;
			margin-right: 1px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			font: {
				family: $font_toolbar;
				size: 12px;
			}

			&.left {
				float: left;
			}
			&.right {
				float: right;
			}

			a {
				padding: {
					left: 6px;
					right: 6px;
					top: 2px;
					bottom: 1px;
				}
				margin:0px;
				cursor: pointer;
				text-decoration: none;
				background: #666;
				&:hover {
					background: #666;
				}
				&:active {
					background: #606060;
				}
			}
		}
	}

	#middlebox {
		background: $dark_bg;
	}

	#statusbar {
		border-bottom-left-radius: $module_radius;
		border-bottom-right-radius: $module_radius;

		&.error {
			background: #B33;
		}

		&.compiling {
			background: #AA8;
		}

		li {
			list-style: none;
			padding: 0px;
			margin: 0px;
			display: inline;
			border-right: 1px solid #FFF;
			padding-right: 6px;
			margin-left: 6px;
		}

		#savestatus {

		}

		#compilestatus {

		}

		#errordisplay {
			margin:auto;
			background: white;
			color: black;
			max-height: 200px;
			overflow-y: auto;
			font: {
				family: $font_monospace;
				size: 12px;
			}
		}
	}
	#editor {
		height: auto;
	}
}

#helpbox {
	background: $light_bg;
	float: right;
	margin: 0px;
	overflow-y: auto;
	padding: 10px;
	position: relative;
	width: 30%;

	&::-webkit-scrollbar {
		width: 12px;
	}
	&::-webkit-scrollbar-track {
	}
	&::-webkit-scrollbar-thumb {
		// border-radius: 10px;
		background: $light_bg2;
		// box-shadow: inset 0px 0px 6px $accent1;
	}

	font: {
		family: $font_main;
		size: 14px;
	}

	p {
		padding: 0px;
		text-indent: 20px;
		margin: {
			top: 2px;
			bottom: 2px;
		}
		// line-height: 100%;
		// letter-spacing: -1px;
		// word-spacing: 2px;
	}
	h1 {
		font: {
			family: $font_heading;
			size: 22px;
			weight: normal;
		}
		margin: {
			left: 0px;
			right: 0px;
			top: 12px;
			bottom: 8px;
		};
	}
	h2 {
		font: {
			family: $font_subheading;
			size: 16px;
			weight: normal;
		}
		margin: {
			top: 10px;
			bottom: 4px;
		}
		border-bottom: 1px dashed $light_bg2;
	}
	ul {
		margin: 0px;
	}
	table {
		width: 100%;
		margin: 0px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		background: $light_bg3;
		font-size: 12px;
		border-collapse: collapse;
		tr {
			border-top: 1px dotted $light_bg;
		}
		tr:first-child {
			border-top: none;
		}
		td {
			padding: {
				top: 2px;
				left: 4px;
				right: 4px;
			}
		}
		td:first-child {
			font-weight: bold;
			padding-right: 8px;
			font-family: $font_monospace;
		}
	}

	#tabbuttonbar {
		background: $light_bg2;
		width: 100%;

		.tabbutton {
			@include unselectable();
			cursor: pointer;
			float:left;
			margin: 0px;
			background: none;
			font-size: 13px;
			color: $accent1;

			padding: {
				top: 2px;
				bottom: 2px;
				left: 8px;
				right: 8px;
			}


			&.active {
				cursor: default;
				background: $light_bg3;

				&:hover {
					color: $accent1;
				}
			}
			&:hover {
				color: #EEE;
			}
		}
	}
}

// Stuff to change the editor
.CodeMirror {
	height: auto;
	width: 70%;
	float:left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	.compile-error {
		background: $dark_bg + #400;
	}


}
.CodeMirror-scroll {
	min-height: 10px;
	max-height: 300px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	font: {
		family: $font_monospace;
		size: 13px;
	}
}

// Find/Replace bar
.CodeMirror-dialog {
	position: absolute;
	left: 0px; right: 0px;
	bottom: 0px;
	background: $dark_bg;
	color: $accent2;
	z-index: 15;
	padding: .1em .8em;
	overflow: hidden;
}

.CodeMirror-dialog-top {
	border-top: 1px solid $accent2;
}

.CodeMirror-dialog-bottom {
	// border-top: 1px solid $accent2;
	bottom: 0;
}

.CodeMirror-dialog input {
	border: none;
	outline: none;
	background: transparent;
	width: 20em;
	color: inherit;
	font-family: $font_monospace;
}

.CodeMirror-dialog button {
	height: 100%;
	background: none;
	border: 1px solid $accent1;
	color: $accent2;

	&:focus {
		background: $accent1 ;
		color: $accent3;
	}
}